function DragGraphicVerificationCode(config){
  var self = this;
  var css = `.geetest_panel_next .jigsaw{ position:absolute;  top: 27%; left: 0px; width: 26.8%; padding:0 0 25.5% 0;}
.geetest_panel_next .jigsaw img{ position:absolute; z-index: 2;  width: 100%;}
.geetest_panel_next .jigsaw canvas{ position:absolute; z-index:1; width: 100%; }


#DragGraphicVerificationCodeDom{ position:fixed; z-index: 9; width: 100%; height: 100%;background: rgba(0,0,0,0.5)}
#DragGraphicVerificationCodeDom .geetest_panel_next{ position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.geetest_panel_next .tips{ position: absolute; height: 28px; width: 100%; bottom: 0px; left: 0px; background: rgba(80,230,80,0.3);
  z-index: 12; color: #fff; font-size: 12px; line-height:28px; padding-left: 3%; opacity: 0}

.geetest_panel_next .tips.fail{background: rgba(230,80,80,0.3); }

.geetest_panel_next .geetest_absolute{ background:rgba(0,0,0,0.5) }

.geetest_absolute img{ width: 100%;}
.geetest_canvas_img .loading{
  opacity:1;  position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10;}

.geetest_panel_next .spinner {
  width: 15%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}
.geetest_panel_next .spinner > div {
  width: 28%;
  height:0;
  margin: 2%;
   padding:0 0 28% 0;
  background-color: #ffffff;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.geetest_panel_next .spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.geetest_panel_next .spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
  0%, 80%, 100% {
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
  } 40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}
.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_loading .geetest_loading_icon,.geetest_holder.geetest_mobile.geetest_ant .geetest_slider,.geetest_holder.geetest_mobile.geetest_ant .geetest_slider .geetest_slider_button,.geetest_holder.geetest_mobile.geetest_ant .geetest_slider.geetest_move .geetest_slider_button,.geetest_holder.geetest_mobile.geetest_ant .geetest_slider.geetest_move .geetest_slider_button:hover,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_close,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_close:hover,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_refresh_1,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_refresh_1:hover,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_feedback,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_feedback:hover,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_voice,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_voice:hover,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_copyright .geetest_logo{background-repeat:no-repeat;background-image:url('./sprite.1.2.4.png');_background-image:url('./sprite.1.2.4.gif')}@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 192dpi), (min-resolution: 1.5dppx){.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_loading .geetest_loading_icon,.geetest_holder.geetest_mobile.geetest_ant .geetest_slider,.geetest_holder.geetest_mobile.geetest_ant .geetest_slider .geetest_slider_button,.geetest_holder.geetest_mobile.geetest_ant .geetest_slider.geetest_move .geetest_slider_button,.geetest_holder.geetest_mobile.geetest_ant .geetest_slider.geetest_move .geetest_slider_button:hover,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_close,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_close:hover,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_refresh_1,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_refresh_1:hover,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_feedback,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_feedback:hover,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_voice,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_voice:hover,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_copyright .geetest_logo{background-image:url('http://enjoy-web.oss-cn-shenzhen.aliyuncs.com/static/sprite2x.1.2.4.png');_background-image:url('./sprite2x.1.2.4.gif')}}.geetest_holder.geetest_mobile.geetest_ant{position:relative;width:278px;touch-action:none}.geetest_holder.geetest_mobile.geetest_ant.geetest_embed{background-color:white}.geetest_holder.geetest_mobile.geetest_ant .geetest_absolute{position:absolute;left:0;top:0;width:100%;height:100%}.geetest_holder.geetest_mobile.geetest_ant .geetest_animate{-moz-transition:left .5s,-moz-transform .5s;-o-transition:left .5s,-o-transform .5s;-webkit-transition:left .5s,-webkit-transform .5s;transition:left .5s,transform .5s}.geetest_holder.geetest_mobile.geetest_ant .geetest_fade{-moz-transition:opacity .5s;-o-transition:opacity .5s;-webkit-transition:opacity .5s;transition:opacity .5s}.geetest_holder.geetest_mobile.geetest_ant *{font-family:"PingFangSC-Regular", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;text-align:left}.geetest_holder.geetest_mobile.geetest_ant .geetest_wrap{width:100%;padding:3.237% 0 0 0;margin:0}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget{margin:0 3.24%;width:93.53%;-moz-transition:padding-bottom .3s ease;-o-transition:padding-bottom .3s ease;-webkit-transition:padding-bottom .3s ease;transition:padding-bottom .3s ease}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window{position:relative;left:0;top:0;height:0;width:100%;padding-bottom:61.54%;overflow:hidden}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window a.geetest_link{font-size:0;display:block;height:100%;width:100%}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window a.geetest_link .geetest_div_fullbg,.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window a.geetest_link .geetest_div_bg{background-color:#f2ece1}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window a.geetest_link .geetest_div_fullbg div,.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window a.geetest_link .geetest_div_bg div{float:left;width:10px;height:50%}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window a.geetest_link .geetest_slice{position:absolute;background-size:contain}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_flash::after{content:'';display:block;position:absolute;z-index:998;top:0;right:-280px;width:140px;height:400px;-moz-transform:skew(30deg);-ms-transform:skew(30deg);-webkit-transform:skew(30deg);transform:skew(30deg);background:url('');background:-webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(255,255,255,0)),color-stop(50%, rgba(255,255,255,0.9)),color-stop(100%, rgba(255,255,255,0)));background:-moz-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0));background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0));background:linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0));-moz-animation:moveTo-left 0.6s linear;-webkit-animation:moveTo-left 0.6s linear;animation:moveTo-left 0.6s linear}@keyframes moveTo-left{0%{right:-280px}100%{right:240px}}@-webkit-keyframes moveTo-left{0%{right:-280px}100%{right:240px}}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_refresh{display:none}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_loading{padding-top:10%;background-color:#e5e5e5;opacity:1}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_loading .geetest_loading_icon{background-size:764.70588%;background-position:0 70.70218%;margin:11% auto 10px;width:34px;height:26px;overflow:hidden}@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 192dpi), (min-resolution: 1.5dppx){.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_loading .geetest_loading_icon{background-size:764.70588%;background-position:0 71.73333%}}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_loading .geetest_loading_tip{text-align:center;font-size:14px;margin-bottom:1%;color:#b2b2b2}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_result{position:absolute;left:0;z-index:999;width:100%;color:white;bottom:-25px;height:24px;-moz-transition:bottom .3s ease;-o-transition:bottom .3s ease;-webkit-transition:bottom .3s ease;transition:bottom .3s ease}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_result.geetest_fail{background-color:#de715b}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_result.geetest_error{background-color:#EBA921}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_result.geetest_forbidden{background-color:#EBA921}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_result.geetest_abuse{background-color:#EBA921}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_result.geetest_success{background-color:#5ebf70}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_result .geetest_result_title{display:none}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_result .geetest_result_content{position:absolute;top:0;text-indent:16px;font-size:14px;line-height:24px;height:24px}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_result .geetest_right_space{padding-right:16px}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_result .geetest_result_icon{display:none}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_multi_line{height:48px}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_multi_line .geetest_result_content{text-indent:0px;padding-left:16px}.geetest_holder.geetest_mobile.geetest_ant .geetest_widget .geetest_window .geetest_showTip{bottom:0px}.geetest_holder.geetest_mobile.geetest_ant .geetest_slider{position:relative;margin:5.39% 3.24%;width:93.52%;padding:0 0 13.67% 0;height:0;overflow:visible;background-color:white;background-size:100%;background-position:0 0}@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 192dpi), (min-resolution: 1.5dppx){.geetest_holder.geetest_mobile.geetest_ant .geetest_slider{background-size:100%;background-position:0 0}}.geetest_holder.geetest_mobile.geetest_ant .geetest_slider .geetest_slider_track{position:absolute;top:50%;left:0;height:38px;margin:-19px 0 0 0;padding:0 0 0 25%}.geetest_holder.geetest_mobile.geetest_ant .geetest_slider .geetest_slider_track .geetest_slider_tip{position:relative;width:100%;height:100%;opacity:0;line-height:38px;font-size:14px;text-align:center;white-space:nowrap;color:#88949d}.geetest_holder.geetest_mobile.geetest_ant .geetest_slider .geetest_slider_track .geetest_slider_tip.geetest_multi_slide{word-wrap:break-word;white-space:normal;line-height:18px;text-align:left}.geetest_holder.geetest_mobile.geetest_ant .geetest_slider.geetest_ready .geetest_slider_tip{opacity:1}.geetest_holder.geetest_mobile.geetest_ant .geetest_slider .geetest_slider_button{position:absolute;top:0;left:0;margin:-4.62% 0 0 -2.31%;width:25.38%;padding:0 0 25.38% 0;height:0;cursor:pointer;font-size:0;background-size:393.93939%;background-position:0 11.79625%}@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 192dpi), (min-resolution: 1.5dppx){.geetest_holder.geetest_mobile.geetest_ant .geetest_slider .geetest_slider_button{background-size:400%;background-position:0 12.20238%}}.geetest_holder.geetest_mobile.geetest_ant .geetest_slider.geetest_move .geetest_slider_button{background-size:393.93939%;background-position:0 31.0992%}@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 192dpi), (min-resolution: 1.5dppx){.geetest_holder.geetest_mobile.geetest_ant .geetest_slider.geetest_move .geetest_slider_button{background-size:400%;background-position:0 32.44048%}}.geetest_holder.geetest_mobile.geetest_ant .geetest_slider.geetest_move .geetest_slider_button:hover{background-size:393.93939%;background-position:0 31.0992%}@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 192dpi), (min-resolution: 1.5dppx){.geetest_holder.geetest_mobile.geetest_ant .geetest_slider.geetest_move .geetest_slider_button:hover{background-size:400%;background-position:0 32.44048%}}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel{position:relative;border-top:1px solid #EEEEEE;width:100%;margin:0;padding:0 0 17.27% 0}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_small{position:absolute;left:5.1%;top:50%;margin-top:-4.13%;padding:0 0 8.27% 0;width:40.45%;height:0}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_temp,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_close,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_refresh_1,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_feedback,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_voice{position:relative;display:inline-block;height:0;padding-bottom:17.8%;cursor:pointer}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_close,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_refresh_1,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_feedback,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_voice{margin-left:8.9%;width:17.8%;cursor:pointer;text-decoration:none;vertical-align:top}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_close{margin-left:0;overflow:hidden;background-size:1300%;background-position:0 44.86874%}@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 192dpi), (min-resolution: 1.5dppx){.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_close{background-size:1300%;background-position:0 46.45669%}}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_close:hover{background-size:1300%;background-position:0 51.07399%;overflow:visible}@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 192dpi), (min-resolution: 1.5dppx){.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_close:hover{background-size:1300%;background-position:0 52.49344%}}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_refresh_1{overflow:hidden;background-size:1300%;background-position:0 81.38425%}@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 192dpi), (min-resolution: 1.5dppx){.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_refresh_1{background-size:1300%;background-position:0 81.88976%}}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_refresh_1:hover{background-size:1300%;background-position:0 87.5895%;overflow:visible}@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 192dpi), (min-resolution: 1.5dppx){.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_refresh_1:hover{background-size:1300%;background-position:0 87.92651%}}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_feedback{overflow:hidden;background-size:1300%;background-position:0 57.27924%}@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 192dpi), (min-resolution: 1.5dppx){.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_feedback{background-size:1300%;background-position:0 58.53018%}}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_feedback:hover{background-size:1300%;background-position:0 63.48449%;overflow:visible}@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 192dpi), (min-resolution: 1.5dppx){.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_feedback:hover{background-size:1300%;background-position:0 64.56693%}}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_voice{overflow:hidden;display:none;background-size:1300%;background-position:0 93.79475%}@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 192dpi), (min-resolution: 1.5dppx){.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_voice{background-size:1300%;background-position:0 93.96325%}}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_voice:hover{background-size:1300%;background-position:0 100%;overflow:visible}@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 192dpi), (min-resolution: 1.5dppx){.geetest_holder.geetest_mobile.geetest_ant .geetest_panel a.geetest_voice:hover{background-size:1300%;background-position:0 100%}}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_close_tip,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_feedback_tip,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_refresh_tip,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_voice_tip{position:absolute;top:-32px;left:10px;border-radius:2px;padding:0 4px;height:22px;min-width:50px;line-height:22px;background-color:#5F5F5F;white-space:nowrap;font-size:12px;text-align:center;color:white}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_close_tip:before,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_feedback_tip:before,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_refresh_tip:before,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_voice_tip:before{display:block;position:absolute;bottom:-6px;left:0;content:'';border-style:solid;border-width:4px 6px;border-color:#5F5F5F transparent transparent #5F5F5F;width:0;height:0}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_copyright{position:absolute;right:5.1%;top:50%;margin-top:-1.48%;padding:0 0 3.96% 0;height:0;width:48%;text-align:right}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_copyright .geetest_logo,.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_copyright .geetest_copyright_tip{display:inline-block;vertical-align:top}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_copyright .geetest_logo{width:11px;height:11px;background-size:2363.63636%;background-position:0 75.70093%}@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 192dpi), (min-resolution: 1.5dppx){.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_copyright .geetest_logo{background-size:2363.63636%;background-position:0 76.41026%}}.geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_copyright .geetest_copyright_tip{margin:0 0 0 4px;line-height:11px;text-decoration:none;font-size:12px;color:#cacaca}@keyframes geetest_shake{25%{margin-left:-6px}75%{margin-left:6px}100%{margin-left:0}}@-webkit-keyframes geetest_shake{25%{margin-left:-6px}75%{margin-left:6px}100%{margin-left:0}}.geetest_holder.geetest_mobile.geetest_ant.geetest_popup{display:none;position:fixed;_position:absolute;z-index:2147483647;left:0;top:0;height:100%;width:100%;opacity:0;-moz-transition:opacity .5s;-o-transition:opacity .5s;-webkit-transition:opacity .5s;transition:opacity .5s}.geetest_holder.geetest_mobile.geetest_ant.geetest_popup .geetest_popup_ghost{position:absolute;left:0;top:0;width:100%;height:100%;_width:2000px;_height:1000px;background-color:black;opacity:.6;filter:alpha(opacity=60)}.geetest_holder.geetest_mobile.geetest_ant.geetest_popup .geetest_popup_box{box-sizing:content-box;position:absolute;top:50%;left:50%;-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:278px;min-width:230px;max-width:278px;border:1px solid #d1d1d1;border-radius:2px;overflow:hidden;background-color:white;margin-left:-139px;margin-top:-143px;_position:absolute;_top:0;_left:0;_margin-left:0;_margin-top:0}.geetest_holder.geetest_mobile.geetest_ant.geetest_popup .geetest_popup_box:last-child{margin-left:0 !important;margin-top:0 !important}.geetest_holder.geetest_mobile.geetest_ant.geetest_popup .geetest_popup_box.geetest_shake{-moz-animation:geetest_shake 0.2s linear infinite both;-webkit-animation:geetest_shake 0.2s linear infinite both;animation:geetest_shake 0.2s linear infinite both}.geetest_holder.geetest_mobile.geetest_ant.geetest_popup .geetest_popup_box .geetest_popup_header{display:none}.geetest_holder.geetest_mobile.geetest_ant.geetest_popup .geetest_popup_box .geetest_popup_wrap{width:100%}
`;



  var html = `<div class="geetest_panel_next" style="display: block; -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;"><div class="geetest_holder geetest_mobile geetest_ant geetest_embed" style="width: 100%;"><div class="geetest_wrap"><div class="geetest_widget"><div class="geetest_window" style="padding-bottom: 61.54%;"><a class="geetest_link"><div class="geetest_canvas_img geetest_absolute" style="display: block;">
  <div class="loading">
  <div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<div class="tips">验证成功</div>
  <div class="geetest_slicebg geetest_absolute">
          <div id="jigsaw" class="jigsaw">
                  <img  src="http://enjoy-web.oss-cn-shenzhen.aliyuncs.com/static/VerificationCode1.png"/>
                  <canvas id="shade" width="210" height="210" ></canvas>
              </div>
  <img id="BgImgUrl" />
</div><canvas class="geetest_canvas_fullbg geetest_fade geetest_absolute" height="160" width="260" style="display: none; opacity: 0;"></canvas></div><div class="geetest_div_img geetest_absolute" style="display: none;"><div class="geetest_slicebg geetest_absolute"><div class="geetest_div_bg geetest_absolute"></div><div class="geetest_div_slice geetest_absolute"></div></div><div class="geetest_div_fullbg geetest_fade geetest_absolute"></div></div></a><div class="geetest_refresh" href="javascript:;" style="display: block;"><div class="geetest_refresh_tip"></div></div><div class="geetest_loading geetest_absolute geetest_fade" style="padding-top: 10%; opacity: 0; display: none;"><div class="geetest_loading_icon"></div><div class="geetest_loading_tip">加载中...</div></div><div class="geetest_result geetest_fail"><div class="geetest_result_box" style="padding-top: 10%;"><div class="geetest_result_icon geetest_fail"></div><div class="geetest_result_title">请正确拼合图像</div><div class="geetest_result_content">请正确拼合图像</div></div></div></div></div><div class="geetest_slider geetest_ready"><div class="geetest_slider_track"><div class="geetest_slider_tip geetest_fade">拖动滑块完成拼图</div></div><div class="geetest_slider_button" id="geetest_slider_button" style="opacity: 1; transform: translate(0px, 0px);"></div></div></div><div class="geetest_panel"><div class="geetest_small"><a class="geetest_close"><div class="geetest_close_tip">关闭验证</div></a><a class="geetest_refresh_1" href="javascript:;"><div class="geetest_refresh_icon"></div><div class="geetest_refresh_tip">刷新验证</div></a>
  <a class="geetest_voice"><div class="geetest_voice_tip"></div></a></div></div></div></div>`;

  this.style = document.createElement('style');
  this.style.innerHTML = css;
  this.style.id = 'DragGraphicVerificationCodeCSS';
  if(!document.getElementById('DragGraphicVerificationCodeCSS')){
      document.body.appendChild(this.style);
  }


  this.dom = document.createElement('div');
  dom.id = 'DragGraphicVerificationCodeDom';
  dom.innerHTML = html;
  self.dom.style.display = 'none';
  document.body.appendChild(dom);

  this.domLeft = 0;

  var interactive = true;
  //获取元素
  var dv = document.getElementById('geetest_slider_button');
  var maxW;
  var x = 0;
  var l = 0;
  var isDown = false;

  var animation


  var userDown = function(clientX) {
      console.log(interactive);
      if(!interactive){  return ;   }
      //获取x坐标和y坐标
      x = clientX;
      //获取左部和顶部的偏移量
      l = dv.offsetLeft;
      //开关打开
      isDown = true;
      //设置样式
      dv.style.cursor = 'move';
  }

  dv.ontouchstart = function (e){
      var touch = e.targetTouches[0];
      userDown(touch.pageX);
  }
  //鼠标按下事件
  dv.onmousedown = function (e){
      userDown(e.clientX);
  }


  var userMove = function (clientX){

      maxW=  dv.parentNode.clientWidth-dv.clientWidth*0.8;
      if (isDown == false || !interactive) {
          return;
      }
      //获取x和y
      var nx = clientX;
      //计算移动后的左偏移量和顶部的偏移量
      var nl = nx - (x - l);
      if(nl<0){nl = 0; }

      if(nl>=maxW){nl = maxW; }

      self.setDomLeft(nl);
  }

  //鼠标移动
  window.addEventListener("mousemove",function(e) {
      userMove(e.clientX);
  },false);

  //鼠标移动
  window.addEventListener("touchmove",function(e) {
      var touch = e.targetTouches[0];
      userMove(touch.pageX);
  },false);


  //鼠标抬起事件
  var loadingOpacity;

  var userUp = function(){
      if(!interactive){  return ;   }

      if (isDown != false) {
          interactive = false;
          loadingOpacity = true;
          setTimeout(function (){
              if(loadingOpacity)document.querySelector('.geetest_canvas_img .loading').style.opacity = 1;
          },500);

          let data = 'code='+self.proportion(),
              url = config.checkUrl,
              xhr = new XMLHttpRequest();

          xhr.open('post', url);
          //设置header
          xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
          xhr.send(data);
          xhr.onreadystatechange = function () {
              if (xhr.readyState === 4 && ( xhr.status === 200 || xhr.status === 304 )){
                  var responseData = JSON.parse(xhr.responseText);

                  loadingOpacity = false;

                  document.querySelector('.geetest_canvas_img .tips').style.opacity = 1;

                  var callback ;
                  if(responseData.code == 1){
                      callback = config.success;
                      document.querySelector('.geetest_canvas_img .tips').className = 'tips';
                      document.querySelector('.geetest_canvas_img .tips').innerHTML = '验证成功'
                  }else{
                      callback = config.fail;
                      document.querySelector('.geetest_canvas_img .tips').className = 'tips fail';
                      document.querySelector('.geetest_canvas_img .tips').innerHTML = responseData.message;
                      self.update(function (){
                          self.setDomLeft(0);
                      });
                  }

                  setTimeout(function (){
                      callback();
                  },500)

                  setTimeout(function (){
                      interactive = true;
                      document.querySelector('.geetest_canvas_img .tips').style.opacity = 0;
                  },1000)
                  // self.update(function (){
                  //     self.setDomLeft(0);
                  // });
              }
          }
      }
      //开关关闭
      isDown = false;
      dv.style.cursor = 'default';
  }

  window.addEventListener("mouseup",function(e) {
      userUp();
  },false);
  window.addEventListener("touchend",function(e) {
      userUp();
  },false);

  document.querySelector('.geetest_refresh_1').onclick = function (){
      self.update(function (){
          self.setDomLeft(0);
      });
  }

  document.querySelector('.geetest_close').onclick = function (){
      self.hide();
  }

  this.proportion = function (){
      return this.domLeft/dv.parentNode.clientWidth*780;
  }

  this.setDomLeft = function (nl){
      self.domLeft = nl;
      document.getElementById('jigsaw').style.left = nl + 'px';
      dv.style.left = nl + 'px';
  }

  this.update = function (callbase){
      document.querySelector('.geetest_canvas_img .loading').style.opacity = 1;
      var BgImgUrl = document.querySelector('#BgImgUrl');
      BgImgUrl.src = config.BgImgUrl+'&time='+ Date.parse(new Date());

      BgImgUrl.onload = function (){
          var shade=document.getElementById('shade');
          var imgContext=shade.getContext("2d");
          imgContext.globalCompositeOperation="source-over"

          var VerificationCode3=new Image();
          VerificationCode3.src='http://enjoy-web.oss-cn-shenzhen.aliyuncs.com/static/VerificationCode3.png';
          VerificationCode3.onload=function(){
              var img=new Image();
              img.src=config.BlockImgUrl+'&time='+ Date.parse(new Date());
              img.onload=function(){
                  imgContext.drawImage(img,0,0);
                  imgContext.globalCompositeOperation="destination-out"
                  imgContext.drawImage(VerificationCode3,0,0);
                  imgContext.fill();
                  document.querySelector('.geetest_canvas_img .loading').style.opacity = 0;
                  if(callbase)callbase();
              }
          }
      }
  }

  this.hide = function (){
      self.dom.style.display = 'none';
  }

  this.show = function (){
      self.dom.style.display = 'block';
      this.update();
  }
  if(config.show){
      this.show();
  }


  return this;
}